<template>
	<view class="btn-container" :class="{'fixed':isFixed,'placeholder': 'isPlaceholder'}">
		<view class="btn-wrap">
			<view class="btn-primary" @click="click">{{text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottomBtnBar",
		props: {
			isFixed: {
				type: Boolean,
				default: false
			},
			isPlaceholder: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: '提交'
			}
		},
		methods: {
			click() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-container{
		width: 100%;
		flex: none;
		&.placeholder{
			height: 173rpx;
		}
		&.fixed{
			.btn-wrap{
				position: fixed;
				bottom: 0;
				left: 0;
			}
		}
	}
// 底部按钮
	.btn-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 173rpx;
		box-sizing: border-box;
		padding: 24rpx 32rpx 46rpx;
		border-top: 3rpx solid #E8E8E8;
		background-color: #fff;
		.btn-primary {
			display: flex;
			width: 100%;
			height: 100rpx;
			padding: 30rpx 32rpx;
			justify-content: center;
			box-sizing: border-box;
			align-items: center;
			border-radius: 8rpx;
			font-size: 28rpx;
			 
			font-weight: 700;
			box-shadow: 0 20rpx 60rpx 0 rgba(#ff6600, 0.24);
			background: #ff6600;
			color: #ffffff;
		}
	}
</style>